import React from 'react';
import { Popover } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';
import { isEmpty } from 'lodash-es';
import styles from './ReactNode.less';
import { CanvasMode } from '../dict';

interface StatusObj {
  nodeName: string;
  desc: string;
}

interface TooltipProps {
  children: React.ReactElement;
  status: StatusObj;
  canvasMode: string;
}

export const NodePopover = ({ children, status, canvasMode }: TooltipProps) => {
  const componentNode = <div style={{ width: '100%', height: '100%' }}>{children}</div>;
  if (isEmpty(status) || CanvasMode.Editor === canvasMode) {
    return componentNode;
  }
  return (
    <Popover
      placement="bottomLeft"
      content={<PopoverContent status={status} />}
      overlayClassName={styles.canvas}
    >
      {componentNode}
    </Popover>
  );
};

// --- 自定义浮动框内容 ---
const nodeAtts: StatusObj = {
  nodeName: '节点名称',
  desc: '描述',
};

const PopoverContent = ({ status }: { status: StatusObj }) => (
  <ul className={styles.list}>
    {Object.entries(nodeAtts).map(([key, text]) => {
      const value = status[key as keyof StatusObj];
      if (value) {
        return (
          <li key={key} className={styles.item}>
            <span className={styles.label}>{text}</span>
            <span className={styles.text}>{value}</span>
          </li>
        );
      }
      return null;
    })}
  </ul>
);
